<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
	<title>新建标签组</title>
	<link rel="stylesheet" href="/layui/css/layui.css">
	<style type="text/css">
		.importExcel_main_contaienr{
			width: 485px;
			margin: 0 auto;
			padding: 32px 32px 32px 0;
			background: #fff;
		}
		.importExcel_title{
			font-size: 17px;
			width: 100%;
			text-align: center;
			margin-top: 2px;
			font-weight: 600;
			line-height: 24px;
			letter-spacing: 1px;
			padding-left: 20px;
		}

		.importExcel_from_contaienr{
			margin-top: 24px;
		}
		.importExcel_button_container{
			display: flex;
			justify-content: space-between;
			padding-top: 10px;
			align-items: center;
		}
		.importExcel_button_container span{
			color: #777;
			font-size: 14px;
			cursor: pointer;
			margin-left: 32px;
		}
		.importExcel_button_content{
			display: flex;
			justify-content: flex-end;
			flex: 1;
			align-items: center;
		}
		.lable_list_container{
			position: relative;
		}
		.lable_list_container svg{
			width: 14px;
			height: 14px;
			position: absolute;
			right: -20px;
			top: 13px;
			cursor: pointer;
		}
		.add_lable_container{
			cursor: pointer;
			color: #1890ff;
			font-size: 14px;
		}
	</style>
</head>
<body>
	<form class="layui-form" action="" id="form1">
		<div class="importExcel_main_contaienr">
			 <h2 class="importExcel_title">编辑标签组</h2>
			 <div class="importExcel_from_contaienr">
			 	<div class="layui-form-item">
			 	  <label class="layui-form-label">标签组名称</label>
			 	  <div class="layui-input-block">
			 	        <input type="text" name="group_name" required id="group_name" lay-verify="required" placeholder="请输入标签组名称" autocomplete="off" class="layui-input">
			 	  </div>
			 	</div>
			 	<div class="layui-form-item">  
			 	  <label class="layui-form-label">标签名称</label>
			 	  <div class="layui-input-block">
			 	        <input type="text" name="name[]" required  lay-verify="required" placeholder="请输入标签名称" autocomplete="off" class="layui-input">
			 	  </div>
			 	</div>
			 	<!-- 循环 -->
			 	
			 	<!-- 添加 -->
			 	<div class="layui-form-item">
			 	  <label class="layui-form-label"> </label>
			 	  <div class="layui-input-block add_lable_container">
			 	  	<span>添加标签</span>
			 	  </div>
			 	</div>
			 </div>
			 <div class="layui-form-item importExcel_button_container">
			 	<!-- <span>删除标签组</span> -->
			 	<div class="importExcel_button_content">
			 		<!-- <button type="button" class="layui-btn layui-btn-primary layui-btn-sm">取消</button> -->
			 		<button type="button" class="layui-btn layui-btn-normal layui-btn-sm" lay-submit lay-filter="addGroupTag">确定</button>
			 	</div>
			 	
			 </div>
		</div>	
	</form>
	<script src="/layui/layui.js"></script>
	<script>

	//表单
	layui.use('form', function(){
	  var form = layui.form;
	  
	  //监听提交
	  form.on('submit(addGroupTag)', function(data){
	    // layer.msg(JSON.stringify(data.field));
	    formData = $('#form1').serialize()
	    myAjaxPost(false, true, '', formData, function (resp) {
	    	console.log(resp);
			if (resp.status == 'success') {
				tusi(resp.msg);
				setTimeout(function(){
					parent.layer.closeAll('iframe');
					parent.location.reload();
				},2000);
			}else{
				alert(resp.msg);
			}
		})
	  });

	});
	// 上传
	layui.use('upload', function(){
	  var upload = layui.upload;
	   
	  //执行实例
	  var uploadInst = upload.render({
	    elem: '#test1' //绑定元素
	    ,url: '/upload/' //上传接口
	    ,done: function(res){
	      //上传完毕回调
	    }
	    ,error: function(){
	      //请求异常回调
	    }
	  });
	});
	</script>
<script src="/cdn/jquery.js"></script>
<script src="/js/ajax.js"></script>
	<script type="text/javascript">
		$('body').on('click','.icon',function(e){
			console.log(this);
			$(this).parent().remove();
		})
		let $div = "<div class='layui-form-item lable_list_container'><label class='layui-form-label'></label><div class='layui-input-block'><input type='text' name='name[]' required lay-verify='required' placeholder='请输入标签名称' autocomplete='off' class='layui-input'></div><svg t='1605457092379' class='icon' viewBox='0 0 1024 1024' version='1.1' xmlns='http://www.w3.org/2000/svg' p-id='2982' width='50' height='50'><path d='M874.230791 149.769209a512 512 0 1 0 0 724.461582 512.884029 512.884029 0 0 0 0-724.461582z m-41.402014 683.059568a453.506763 453.506763 0 1 1 0-641.657554 454.317122 454.317122 0 0 1 0 641.657554z' fill='#acacac' p-id='2983'></path><path d='M758.791367 482.532374H265.576978a29.467626 29.467626 0 1 0 0 58.935252H758.791367a29.467626 29.467626 0 1 0 0-58.935252z' fill='#acacac' p-id='2984'></path></svg></div>"
		$('.add_lable_container').click(function(){
			$(this).parent().before($div);
		})
	</script>
</body>
</html>